let dataInfo = [
  { name: 'English chan', money: 392001 },
  { name: 'alex chan', money: 568932 },
  { name: 'melon chan', money: 698756 },
  { name: 'Clare Langner', money: 292489 },
  { name: 'Abigail Rice', money: 953957 },
  { name: 'Clarice Dias', money: 168472 },
  { name: 'Vernon Lucas', money: 718225 },
  { name: 'Nina Schmidt', money: 889147 },
];
// 获取导航栏按钮
let btn_left = document.querySelector('.btn_left');
let bigdiv = document.querySelector('.bigdiv');
// 准备一个开关
let falg = false;
btn_left.onclick = function () {
  // 把按钮取反
  falg = !falg;
  if (falg == true) {
    bigdiv.style.transform = 'translate(200px)';
  } else {
    bigdiv.style.transform = 'translate(0px)';
  }
};

// 获取tbody，渲染数据
let tbody = document.querySelector('tbody');

// 添加账户
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let btn3 = document.querySelector('.btn3');
let btn4 = document.querySelector('.btn4');
let btn5 = document.querySelector('.btn5');
// 准备一个新的数组；
let index = 0;
let New = [];
// 添加账户
btn1.onclick = function () {
  if (index >= dataInfo.length) {
    return;
  }
  New.push(dataInfo[index]);
  index++;
  fn();
};
// 资金翻倍
btn2.addEventListener('click', function () {
  New.forEach(function (item) {
    item.money = item.money * 2;
  });
  fn();
});
// 查询百万富翁
btn3.onclick = function () {
New = New.filter((item)=> item.money >1000000)
fn();
};

// 财富榜
btn4.onclick = function () {
New = New.sort((a,b)=>b.money - a.money)
fn()
}

let tfoot = document.querySelector('tfoot')
// 总额
btn5.onclick = function () {
  let New_two =  New.reduce((prev, item)=> prev + item.money,0)
  let str=`
  <tr>
  <td>Total sum:</td>
  <td>$${New_two}</td>
  </tr>`;
  // 将数据渲染到tfoot里面，就不会覆盖tbody的数据
  tfoot.innerHTML =str; 
}

// 封装这个数据
function fn() {
  let str = '';
  New.forEach(function (item) {
    str += `
        <tr>
            <td>${item.name}</td>
            <td>$${item.money.toLocaleString()}.00</td>
        </tr>
        `;
  });
  tbody.innerHTML = str;
}
